import { Button, Modal, message } from 'antd';
import axios from 'axios';
import React, { Component, useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';

export function ProductDetail(props) {
    const t = localStorage.getItem("token")
    if (!t) { message.info('未登录,1秒后跳转登录'); setTimeout(() => location.href = '/login', 1000); return }
    //函数式组件使用state
    const initProduct = {}
    const [product, setProduct] = useState(initProduct)
    const { productId } = useParams();
    useEffect(() => {
        // Your code here
        axios.get('/shopping-product-server/product/' + productId)
            .then(response => {
                // 处理返回的数据
                const resp = response.data
                setProduct(resp);
                // if (resp.success) {
                //     console.log(resp.data, 111);
                //     setProduct(resp.data);
                // } else {
                //     message.info(JSON.stringify(resp.data))
                // }
            }).catch(error => {
                // 处理错误
                message.error(error)
            });
    }, []);

    function putInCar() {
        console.log(product.id);
        const user = JSON.parse(localStorage.getItem('user'))
        axios.post('/shopping-car-server/car/putInCar',
            { 'productId': product.id, 'userId': user.id, 'price': product.price })
            .then(response => {
                const resp = response.data
                if (resp.success) {
                    message.success(JSON.stringify(resp.data))
                } else {
                    message.error(JSON.stringify(resp.data))
                }
            }).catch(error => {
                message.error(error)
            });
    }

    function buy() {
        let user = JSON.parse(localStorage.getItem('user'))
        if (!user.address) { message.info('请填写地址'); return }
        Modal.info({
            content: '确定购买' + `${product.name}` + '吗?',
            okText: '确认',
            cancelText: '取消',
            onOk: okBuy
        })
    }

    function okBuy() {
        const user = JSON.parse(localStorage.getItem('user'))
        const order = {
            'productId': product.id,
            'userId': user.id,
            'address': user.address,
            // 'status':,
            'brand': product.brand,
            'productQuantity': 1,
            'amount': product.price,
        }
        axios.post('/shopping-order-server/order/produce', order)
            .then(response => {
                const resp = response.data
                if (resp.success) {
                    message.success(JSON.stringify(resp.data))
                } else {
                    message.error(JSON.stringify(resp.data))
                }
            }).catch(error => {
                message.error(error)
            });
    }

    return (
        <div>
            <h1>{product.name}</h1>
            <h1>{product.price}</h1>
            <Button type='primary' onClick={putInCar}>加购</Button>
            <Button type='primary' onClick={buy}>下单</Button>
        </div>
    );
}